<template>
  <div class="container">
    <el-row class="toolbar searchInputWidth" style="padding-bottom: 0">
      <el-form :inline="true" :model="filterField" ref="searchConditions">
        <el-form-item label="手机号" class="row-padding-bottom">
          <el-input
            placeholder="请输入手机号"
            clearable
            v-model="filterField.tel"
            @input="changeSearch"
          ></el-input>
          <p class="moDatatip" v-show="showMoDatatip">
            ※请输入手机号查询，查询后展示查询内容
          </p>
        </el-form-item>
        <el-form-item label="验证码" class="row-padding-bottom">
          <el-input
            placeholder="请输入验证码"
            clearable
            v-model="filterField.identifyCode"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            size="medium"
            class="vscodeBtn"
            v-show="!isCount"
            @click="getVscode()"
            :disabled="noTel"
            >获取验证码</el-button
          >
          <el-button type="info" plain size="medium" v-show="isCount" disabled
            >{{ countDownTime }}s后重新获取</el-button
          >
        </el-form-item>
        <el-form-item>
          <el-button class="commonBut saveBtn" @click="toSearch">
            <span class="opetareText">查询</span>
          </el-button>
        </el-form-item>
      </el-form>
    </el-row>
    <el-row v-show="!showMoDatatip" class="marginBot">
      <el-col class="borderSide" :span="11"></el-col>
      <el-col class="borderCon" :span="2">查询结果</el-col>
      <el-col class="borderSide" :span="11"></el-col>
    </el-row>
    <el-table
      v-show="!showMoDatatip"
      :data="tableData"
      :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
      style="width: 100%"
    >
      <el-table-column prop="caseCode" label="案件登记编码"> </el-table-column>
      <!-- <el-table-column prop="companyName" label="单位名称">
            </el-table-column>  -->
      <el-table-column prop="companyName" label="单位名称" width="230">
        <template slot-scope="scope">
          <copyText
            :tableIndex="scope.$index"
            :copyTextName="scope.row.companyName"
            :columnName="'companyName'"
          ></copyText>
        </template>
      </el-table-column>
      <el-table-column prop="type" label="类型"> </el-table-column>
      <el-table-column prop="createTime" label="登记时间"> </el-table-column>
      <el-table-column prop="acceptType" label="受理状态"> </el-table-column>
      <el-table-column label="操作" align="left" fixed="right">
        <template slot-scope="scope">
          <el-link type="primary" @click="seeDetail(scope.$index, scope.row)"
            >查看</el-link
          >
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      title="投诉举报信息"
      :visible.sync="formVisible"
      @close="closeDialog"
      :close-on-click-modal="false"
      :modal-append-to-body="false"
      :append-to-body="true"
    >
      <div>
        <el-row>
          <el-col :span="12">
            <span class="labelWidth">纠纷类型：</span>
            <span class="information" :title="detailData.type">{{
              detailData.type || '--'
            }}</span>
          </el-col>
          <el-col :span="12" class="ellipsis">
            <span class="labelWidth">项目名称：</span>
            <span class="information" :title="detailData.projectName">{{
              detailData.projectName || '--'
            }}</span>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <span class="labelWidth">投诉时间：</span>
            <span class="information">{{ detailData.createTime || '--' }}</span>
          </el-col>
          <el-col :span="12">
            <span class="labelWidth">投诉人员：</span>
            <span class="information">{{ detailData.name || '--' }}</span>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <span class="labelWidth">纠纷对象：</span>
            <span class="information">{{
              detailData.complaintName || '--'
            }}</span>
          </el-col>
          <el-col :span="12" class="ellipsis">
            <span class="labelWidth">企业名称：</span>
            <span class="information" :title="detailData.companyName">{{
              detailData.companyName || '--'
            }}</span>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <span class="labelWidth">投诉人员联系方式：</span>
            <span class="information">{{ detailData.tel || '--' }}</span>
          </el-col>
          <el-col :span="12">
            <span class="labelWidth">纠纷对象：</span>
            <span class="information">{{
              detailData.complaintTel || '--'
            }}</span>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <span class="labelWidth">统一社会信用代码：</span>
            <span class="information">{{ detailData.uscc || '--' }}</span>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <span class="labelWidth">纠纷内容：</span>
            <span class="information">{{
              detailData.complaintCont || '--'
            }}</span>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <span class="labelWidth">举报凭证：</span>
            <span class="information">--</span>
          </el-col>
        </el-row>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: 'progressSearch',
  data() {
    return {
      //搜索条件
      filterField: {
        tel: '', //手机号
        identifyCode: '', //验证码
      },
      showMoDatatip: true, //显示小红字
      noTel: true, //不可以点击获取验证码
      isCount: false, //短信验证码
      countDownTime: 60, //倒计时
      auth_timetimer: null,
      tableData: [
        {
          id: '1',
          caseCode: '31231314234',
          companyName: '湖北会基网络科技有限公司',
          type: '拖欠工资',
          createTime: '2020/3/7 17:09:06',
          acceptType: '已登记',
          projectName: '金融港改建工程',
          name: '段建永',
          complaintName: '',
          tel: '13888931035',
          complaintTel: '',
          uscc: '91422801MA48C4N63X',
          complaintCont: '拖欠工资奖金',
        },
        {
          id: '2',
          caseCode: '23123343343',
          companyName: '巴东碧桂园房产开发有限公司',
          type: '拖欠工资',
          createTime: '2019/12/30 12:04',
          acceptType: '已受理',
          projectName: '恩施巴东碧桂园一期总承包工程',
          name: '刘欣平',
          complaintName: '李四',
          tel: '16612345678',
          complaintTel: '13888931035',
          uscc: '91422823MA4953G50J',
          complaintCont: '拖欠工资奖金',
        },
        {
          id: '3',
          caseCode: '15015372452',
          companyName: '湖北利达建设工程集团有限公司',
          type: '劳务纠纷',
          createTime: '2019/12/30 11:47',
          acceptType: '已受理',
          projectName: '恩施巴东碧桂园一期总承包工程',
          name: '李海滨',
          complaintName: '王东',
          tel: '13577197170',
          complaintTel: '13887801965',
          uscc: '91421022706978086M',
          complaintCont: '老板欠工资',
        },
        {
          id: '4',
          caseCode: '16907401561',
          companyName: '湖北龙大建设工程有限公司',
          type: '劳务纠纷',
          createTime: '2019/12/28 8:51',
          acceptType: '不予受理',
          projectName: '巴东县官渡口镇红花岭京援创业扶贫园项目边坡支护工程',
          name: '李永祯',
          complaintName: '欧关胤',
          tel: '15171039313',
          complaintTel: '13277559518',
          uscc: '91420000685646727K',
          complaintCont: '公司不按合同操作，让工人去其他的地方工作',
        },
        {
          id: '5',
          caseCode: '21200569330',
          companyName: '安徽丰林建设工程有限公司',
          type: '拖欠工资',
          createTime: '2019/12/27 20:13',
          acceptType: '已受理',
          projectName: '巴东县官渡口镇红花岭京援创业扶贫园项目边坡支护工程',
          name: '郭珍玉',
          complaintName: '杨树锋',
          tel: '15272911388',
          complaintTel: '18872153098',
          uscc: '914200001776002000',
          complaintCont: '欠了三个月的工资不发',
        },
        {
          id: '6',
          caseCode: '39308540221',
          companyName: '咸丰县恒德建筑工程有限公司',
          type: '其他',
          createTime: '2019/12/20 16:19',
          acceptType: '已转派',
          projectName:
            '咸丰县坪坝营镇杨洞易地扶贫搬迁安置区（一期三标段）工程项目',
          name: '刘欣平',
          complaintName: '424',
          tel: '16612345678',
          complaintTel: '423',
          uscc: '91422826077008799Y',
          complaintCont: '42424',
        },
      ],
      formVisible: false, //详情弹框
      detailData: '', //获取详情弹框数据
    }
  },
  methods: {
    //发送验证码倒计时
    countDown() {
      let vm = this
      //开启倒计时
      vm.isCount = true
      this.auth_timetimer = setInterval(() => {
        vm.countDownTime--
        if (vm.countDownTime <= 0) {
          vm.isCount = false
          clearInterval(vm.auth_timetimer)
          vm.countDownTime = 60
        }
      }, 1000)
    },
    changeSearch() {
      //验证手机号成功
      var regTel = /^1[3456789]\d{9}$/
      if (regTel.test(this.filterField.tel)) {
        this.noTel = false
      } else {
        this.noTel = true
      }
    },
    //点击发送验证码
    getVscode() {
      var regTel = /^1[3456789]\d{9}$/
      if (regTel.test(this.filterField.tel)) {
        this.isCount = true
        this.countDownTime = 60
        this.countDown()
      }
    },
    toSearch() {
      //验证码和手机号必须填入完整才能查询显示
      var regTel = /^1[3456789]\d{9}$/
      var regIdentifyCode = /^\d{6}$/
      // if ( regTel.test(this.filterField.tel) && regIdentifyCode.test(this.filterField.identifyCode)) {
      //     this.showMoDatatip = false;
      // } else {
      //     this.$message({
      //         message: "请输入手机号和验证码",
      //         type: "warning"
      //     });
      // }
      if (
        regTel.test(this.filterField.tel) &&
        regIdentifyCode.test(this.filterField.identifyCode)
      ) {
        this.showMoDatatip = false
      } else if (!regTel.test(this.filterField.tel) && this.filterField.tel) {
        this.$message.error('请输入正确的手机号')
      } else if (
        !regIdentifyCode.test(this.filterField.identifyCode) &&
        this.filterField.identifyCode
      ) {
        this.$message.error('请输入正确验证码')
      } else {
        this.$message.error('请输入手机号和验证码')
      }
    },
    seeDetail(index, row) {
      this.formVisible = true
      this.detailData = Object.assign({}, row)
    },
    closeDialog() {
      this.formVisible = false
    },
  },
}
</script>
<style lang="less" scoped>
.container {
  padding-top: 14px;
  .moDatatip {
    color: #f56c6c;
    font-size: 14px;
    margin-top: -2px;
  }
  .marginBot {
    margin-bottom: 20px;
  }
  .borderSide {
    width: 45.83333%;
    border-bottom: 1px solid #d5dee7;
    padding-top: 10px;
    line-height: 2px;
  }
  .borderCon {
    text-align: center;
    font-size: 14px;
    color: #a3a3a3;
  }
  .vscodeBtn {
    width: 128px;
    border: 1px solid #009588;
    color: #009588;
  }
  .commonBut {
    width: 92px;
  }
  .labelWidth {
    display: inline-block;
    width: 135px;
    text-align: right;
    font-size: 14px;
    color: #333;
    line-height: 36px;
  }
  .information {
    font-size: 14px;
    color: #666;
    line-height: 36px;
  }
  /deep/ .searchInputWidth .el-form--inline .el-form-item__label {
    width: 75px;
  }
  /deep/ .searchInputWidth .el-input__inner {
    width: 300px;
  }
  @media screen and (min-width: 1024px) and (max-width: 1300px) {
    /deep/ .searchInputWidth .el-input__inner {
      width: 240px;
    }
    .moDatatip {
      font-size: 12px;
    }
  }
}
</style>
